<template>
    <div>
        <el-form :model="form" ref="form" label-width="80px">
            <div class="curBox">
                <div class="compSearch">
                    <span>企业名称或代码</span>
                    <el-input  v-model="keyword" placeholder="请输入企业名称或者代码" size="mini" id="s1"></el-input>
                    <el-button @click="searchCom" type="success" size="mini" >搜 索</el-button>
                </div>
                <div class="contentComp">
                    <span class="company" v-for="(item, index) in curLists" :key="index">{{item.code}} {{item.name}} <i class="popList" @click="reduceCompany($event, index, item.id)">×</i></span>
                </div>
            </div>
            <div class="allBox">
                <div class="compSearch">
                    <span>企业名称或代码</span>
                    <el-input v-model="keyword2" placeholder="请输入企业名称或者代码" size="mini" id="s2"></el-input>
                    <el-button @click="searchAllCom" @keyup.enter.native="searchAllCom" type="success" size="mini" >搜 索</el-button>
                </div>
                <div class="allComp">
                    <span class="company" v-for="(item, index) in allcom" :key="index">{{item.code}} {{item.name}} <i class="pushList"  @click="addComp($event, index, item.id)">+</i></span>
                </div>
            </div>
        </el-form>

    </div>
</template>
<script>
export default {
    name:'publicCompany',
    props: ['name'],
    data () {
        return {
            form:{},
            id:'',
            curLists: [],
            allcom: [],
            keyword: '',
            keyword2: ''
        }
    },
    mounted () {
        console.log(this.name);
        // 加载所有企业
        this.$axios.get(`/api/com-simple/`,{
            params:{
                search:''
            }
        })
        .then((res)=>{
            console.log(res.data);
            if(res.status === 200 && res.data.length > 0){
                this.allcom = res.data;
            }
        })
        .catch((error)=>{

        })
        // // 对应tab的企业
        // let this.id = this.name;
        this.$axios.get(`/api/com-simple/`,{
            params:{
                search:'',
                c_type: this.name
            }
        })
        .then((res)=>{
            console.log(res.data);
            if(res.status === 200 && res.data.length > 0){
                this.curLists = res.data;
            }
        })
        .catch((error)=>{

        })

    },
    methods: {
        addComp (e, idx, id) {
            console.log(id);
            let com = this.allcom[idx];
            let exists = this.curLists.findIndex((ele) => {
                return ele.id === id;
            });
            if (exists === -1) {
                console.log(com.c_type);
                // console.log(this.name);
                com.c_type.push(this.name);
                this.$axios.put(`/api/com/${id}/ctype/`, 
                    JSON.stringify({
                        c_type: com.c_type
                    })
                )
                .then((res)=>{
                    if(res.status === 200){
                        this.curLists.push(com);
                    }
                })
                .catch((error)=>{
                    console.log(error);
                })

            }else {
                this.$message.error('该公司已经存在');
            }
        },
        reduceCompany (e, idx, id) {
            let com = this.curLists[idx];
            let curindex = com.c_type.indexOf(this.name);
            console.log(curindex);
            
            com.c_type.splice(curindex, 1);

            this.$axios.put(`/api/com/${id}/ctype/`, 
                    JSON.stringify({
                        c_type: com.c_type
                    })
                )
                .then((res)=>{
                    if(res.status === 200){
                        this.curLists.splice(idx, 1);
                    }
                })
                .catch((error)=>{
                    console.log(error);
            })



        },
        searchCom(){
            this.$axios.get(`/api/com-simple/`,{
                params:{
                    search: this.keyword,
                    c_type: this.name
                }
            })
            .then((res)=>{
                console.log(res.data);
                if(res.status === 200 && res.data.length > 0){
                    this.curLists = res.data;
                }
            })
            .catch((error)=>{

            })
        },
        searchAllCom(){
            console.log(this.keyword2);
            this.$axios.get(`/api/com-simple/`,{
                params:{
                    search: this.keyword2,
                }
            })
            .then((res)=>{
                console.log(res.data);
                if(res.status === 200 && res.data.length > 0){
                    this.allcom = res.data;
                }
            })
            .catch((error)=>{

            })
        }
    },
    created(){
        console.log('create')
        let that = this;
        document.onkeydown = function(e){
            console.log(e.target.id);
            if(e.keyCode == 13){
                if(e.target.id === 's2'){
                    that.searchAllCom();
                }else{
                    that.searchCom();
                }
            }
        }
    },
    watch: {
        // curList (curVal, oldVal) {
        //     console.log(curVal);
        //     console.log(oldVal);
        // }
    },
    computed: {
        
    }
}
</script>
<style lang="scss" scoped>
.compSearch {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.contentComp {
    height: 200px;
    overflow-y: scroll;
    span {
        padding: 5px 0;
    }
}
.allComp {
    height: 450px;
    overflow-y: scroll;
    span{
        padding: 5px 0;
    }
}
.el-input {
    width: 170px!important;
    margin: 0 10px;
}
.curBox {
    padding: 15px 20px;
    height: 250px;
    border: 1px solid #cccccc;
}
.allBox {
    padding: 15px 20px;
    height: 500px;
    margin-top: 20px;
    border: 1px solid #cccccc;
}
.company {
    display: inline-block;
    width: 250px;
}
.company i {
    color: red;
    font-size: 24px;
    font-style: normal;
    display: inline-block;
    visibility: hidden;
}
.company:hover .pushList{
    color: #20a0ff;
    visibility: visible;
    font-size: 24px;
    position: relative;
    top: 3px;
    cursor: pointer;
}
.company:hover .popList{
    color: red;
    font-size: 24px;
    font-style: normal;
    cursor: pointer;
    visibility: visible;
    position: relative;
    top: 3px;
}
</style>

